<template>
    <div>
        <el-container style="height: 500px; border: 1px solid #eee">
            <!-- 侧边栏 -->
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu>
                    <!-- 主页 -->
                    <el-menu-item index="1">
                        <i class="el-icon-message"></i><router-link :to="{name:'Zhuye'}">主页</router-link>
                    </el-menu-item>
                    <!-- 单独的路由 -->
                     <el-menu-item index="2">
                        <i class="el-icon-message"></i><router-link :to="{name:'Luyou'}">单独的路由</router-link>
                    </el-menu-item>
                    <!-- 外链 -->
                     <el-menu-item index="3">
                        <i class="el-icon-message"></i><router-link :to="{name:'Wailian'}">外链</router-link>
                    </el-menu-item>
                    <!-- 二级菜单 -->
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-menu"></i><span>二级菜单</span>
                        </template>
                        <el-menu-item index='4-1'><i class="el-icon-menu"></i><router-link :to="{name:'Table'}">表格</router-link></el-menu-item>
                        <el-menu-item index='4-2'><i class="el-icon-menu"></i><router-link :to="{name:'Wailian'}">外链</router-link></el-menu-item>
                        <el-submenu index="4-3">
                            <template slot="title"><i class="el-icon-menu"></i><span >三级菜单</span></template>
                            <el-menu-item index="4-3-1"><span>内容1</span></el-menu-item>
                            <el-menu-item index="4-3-2"><span>内容2</span></el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-aside>        

            <!-- 主体 -->
            <router-view></router-view>
        </el-container>
    </div>
</template>

<script>
    export default {
        name:'Home'
    }
    
</script>

<style scoped>
    .el-container .logo{
        width: 100%;
        display:flex;
        align-items:center;
    }
</style>